import { apiGetList } from '../../api'
import React, { useEffect, useState } from 'react'
import { Table, Button, Space, Card, Form, Select } from 'antd';
import { useNavigate } from 'react-router-dom'
import { isDeleteExpression } from 'typescript';

const { Option } = Select;

const List = () => {

    const navigate = useNavigate()

    const [searchPage, setSearchPage] = useState({
        type: 0
    })

    const [list, setList] = useState([])

    const btns = ['全部', "进行中", "已结束"]

    const toDetail = (id: string) => {
        navigate(`/detail/${id}`)
    }

    const columns = [
        {
            title: '试卷信息',
            dataIndex: 'title',
            key: "title"
        },
        {
            title: '班级',
            dataIndex: 'city',
            key: 'city'
        },
        {
            title: '创建人',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '开始时间',
            dataIndex: 'datetimeStart',
            key: 'datetimeStart'
        },
        {
            title: '结束时间',
            dataIndex: 'datetimeStart',
            key: 'datetimeStart'
        },
        {
            title: '操作',
            dataIndex: "id",
            render: (id: string) => {
                return <Button onClick={() => toDetail(id)}> 详情 </Button>
            }
        }
    ]

    const getList = () => {
        apiGetList({ ...searchPage }).then(res => {
            setList(res.data)
        })
    }

    useEffect(() => {
        getList()
    }, [searchPage])

    const filterData = (idx: number) => {
        setSearchPage({
            ...searchPage,
            type: idx
        })
    }

    const onFinish = (value: any) => {
        setSearchPage({
            ...searchPage,
            ...value
        })
    }

    return <div>
        {/* 搜索 */}
        <Card>
            <Form
                name="basic"
                onFinish={onFinish} // 提交
                autoComplete="off"
                layout="inline"
            >
                <Form.Item
                    label="考试类型"
                    name="examType"
                >
                    <Select
                        placeholder="请选择"
                        allowClear
                    >
                        <Option value="理论">理论</Option>
                        <Option value="机试">机试</Option>
                    </Select>
                </Form.Item>

                <Form.Item
                    label="课程"
                    name="className"
                >
                    <Select
                        placeholder="请选择"
                        allowClear
                    >
                        <Option value="node">node</Option>
                        <Option value="vue">vue</Option>
                        <Option value="react">react</Option>
                        <Option value="项目实战">项目实战</Option>
                        <Option value="高级ndoe">高级ndoe</Option>
                        <Option value="高级程序设计">高级程序设计</Option>

                    </Select>
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        搜索
                    </Button>
                </Form.Item>
            </Form>
        </Card>

        {/* 表格 */}
        <Space style={{ marginBottom: 16 }}>
            {
                btns.map((item, idx) => {
                    return <Button key={idx} onClick={() => filterData(idx)}>{item}</Button>
                })
            }
        </Space>
        <Table columns={columns} dataSource={list} />
    </div>
}

export default List